{% stylesheet %}
.graphic-warp {
  margin: 0 auto;
  max-width: var(--general_layout_width);
}

.graphic-warp .graphic-list {
  display: grid;
  flex-wrap: wrap;
  -moz-column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}

.graphic-warp .graphic-list .graphic-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.graphic-warp .graphic-list .graphic-item > .graphic-item-img {
  width: 100%;
}

.graphic-warp .graphic-list .graphic-item .graphic-item-image {
  vertical-align: top;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.graphic-warp .graphic-list .graphic-item .graphic-item-title {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--title_color);
  font-size: var(--product_font_size);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.graphic-warp .graphic-list .graphic-item .graphic-item-des {
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--detail_color);
}

.graphic-warp .graphic-list .graphic-item .graphic-item-more {
  font-weight: 400;
  color: #1d1f21;
  font-size: 14px;
  line-height: 24px;
  margin-top: 20px;
}

.graphic-warp.graphic-font-left .graphic-item {
  align-items: flex-start;
  text-align: left;
}

.graphic-warp.graphic-font-right .graphic-item {
  align-items: flex-end;
  text-align: right;
}

.graphic-warp.graphic-font-center .graphic-item {
  align-items: center;
  text-align: center;
}

.graphic-warp.graphic-font-rigth .graphic-item {
  align-items: flex-end;
}

@media screen and (max-width: 767px) {
  .graphic-warp .graphic-list {
    grid-template-columns: 1fr;
  }
  .graphic-warp .graphic-list .graphic-item .graphic-item-image {
    margin-bottom: 20px;
  }
}

{% endstylesheet %}

{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_url %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_url %}

<div class="graphic-warp graphic-font-{{ section.settings.text_position }}">
  <div class="container_wrapper">
		{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

    <div class="graphic-list">
        {% for block in section.blocks %}
        <div class="graphic-item">
						{% if block.image.src != "" %}
							<a  class="graphic-item-img" href="{{block.link | setUrlDataFrom:data_from}}" data-tips="Please select the image link"><img class="graphic-item-image" data-src="{{ block.image.src }}" src="{{ defaultImageLoading }}"  alt="{{ block.image.alt }}"></a>
						{% else %}
							<a  class="graphic-item-img" href="{{block.link | setUrlDataFrom:data_from}}" data-tips="Please select the image link"><img class="graphic-item-image" data-src="{{ block.image.src }}" src="{{ defaultImageEmpty }}"  alt="{{ block.image.alt }}"></a>
						{% endif %}
            <a class="graphic-item-title" href="{{block.link | setUrlDataFrom:data_from}}">{{ block.title }}</a>
            <div class="graphic-item-des">{{ block.content }}</div>
        </div>
        {% endfor %}
    </div>
  </div>
</div>



{% schema %}
{
	"tag": "",
	"class": "block_image_text_list",
	"is_global": false,
	"name": {
		"zh_CN": "图文列表",
		"en_US": "Image-text list"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "文字对齐方式",
				"en_US": "Text alignment"
			},
			"id": "text_position",
			"option": [
				{
					"label": {
						"zh_CN": "左对齐",
						"en_US": "Left aligned"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "右对齐",
						"en_US": "Right align"
					},
					"value": "right"
				}
			],
			"default": "left"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "图文",
				"en_US": "Image and text"
			},
			"type": "graphic-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "选择图片",
						"en_US": "Select image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "常用比例4:3、3:2、2:1、1:1，宽度1000px以上,高度可自适应",
						"en_US": "Commonly used ratio 4:3, 3:2, 2:1, 1:1, width 1000px or more, height can be adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "IMAGE TITLE"
				},
				{
					"type": "card_textarea",
					"label": {
						"zh_CN": "内容",
						"en_US": "Content"
					},
					"default": "Tell your brand's story through",
					"id": "content"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Text Columns With Images",
			"detail": "",
			"text_position": "center"
		},
		"blocks": [
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "IMAGE TITLE",
				"content": "Tell your brand's story through",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "graphic-item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "IMAGE TITLE",
				"content": "Tell your brand's story through",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "graphic-item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "IMAGE TITLE",
				"content": "Tell your brand's story through",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "graphic-item"
			}
		]
	},
	"icon": "icon-tuwenliebiao"
}
{% endschema %}